<template>
  <div class="config_serve">
    <div class="base-container">
        <h2>服务器配置   
          <el-button type="primary" @click="addEnv">添加环境配置</el-button>
          <el-button type="primary" @click="save">保存更新</el-button>
        </h2>
        <div class="table">
          <div class="env">
            <ul>
              <li 
              v-for="(item,index) in list" 
              :key="index" 
              :class="{active:active==index}"
              @click="changeEnv(index)"
              >
              {{item.name}} <span v-if="currEnv==item.name">当前环境</span>
              </li>
            </ul>
          </div>
          <div class="content">
             <div>
               <div class="desc">描述：<el-input v-model="info.desc" placeholder="请输入内容"></el-input></div>
               <div class="json-w" ref="jsoneditor"></div>
             </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'config_serve',
  data: function() {
        return {
          list:[],
          info:{},
          active:0,
          currEnv:""
        }
  },
  components: {
  },
  mounted(){
         var options = {
              mode: 'code',
              indentation:4
          };
         this.editor = new JSONEditor(this.$refs.jsoneditor, options);
         
         //this.editor.set(json);
         // get json
         //var json = editor.get();

    this.getEnvList();


  },
  methods:{
    getEnvList(){
      const me = this;
      me.$API.getEnvList().then((res)=>{
        let list = res.list || [];
        me.list = list;
        me.currEnv = res.currEnv || "";
        if(list.length > 0){
          me.getEnvInfo(list[0]._id);
        }
      }).catch(()=>{

      })
    },
    getEnvInfo(id){
       const me = this;
       me.$API.getEnvInfo({id}).then((res)=>{
        me.info = res;
        me.editor.set(res.content || {});
      }).catch((err)=>{
          console.log(err)
      })  
    },
    addEnvName(name){
      const me = this;
      me.$API.addEnv({name}).then((res)=>{
        me.list.push(res);
      }).catch(()=>{

      })
    },
    addEnv(){
      const me = this;
      this.$messageBox.prompt('请输入环境名称', '环境名为纯英文字符', {
          confirmButtonText: '确定'
      }).then((action)=>{
        let val = action.value;
        if(val && /^[A-Za-z]+$/.test(val)){
            console.log("通过");
            me.addEnvName(val);
        }else{
          me.$message.warning("名称不符合");
        }
      }).catch(()=>{})
    },
    changeEnv(index){ 
      this.active = index;
      this.getEnvInfo(this.list[index]._id);
    },
    save(){
      var json = this.editor.get();
      console.log(json);
      const me = this;
      let params = {...this.info};
      delete  params._id;
      params.content = me.editor.get();
      me.$API.updateEnv({id:me.info._id,data:params}).then((res)=>{
        
      }).catch((err)=>{
          console.log(err)
      })  
      

    }
  },
  destroyed(){
    this.editor && this.editor.destroy();
  }
}
</script>
<style lang="scss" scoped src="./config_serve.scss">
</style>
<style lang="scss">
div.config_serve{

  .jsoneditor-menu a.jsoneditor-poweredBy{
    display: none !important;
  }
  .content{
    div.desc{
      div.el-input{
        flex:1;
      }
    }
  }
}

</style>
